<template>
  <base-modal
    :width="modAlProps.width"
    :isVisible="props.isVisible"
    :title="modAlProps.title"
    :buttons="buttons"
    @handleCancle="handleCancle"
    @handleOk="buttonMessage"
    class="sharing_modal"
  >
    <template v-slot:body>
      <a-form
        name="advanced_search"
        autoComplete="off"
        class="ant-advanced-search-form"
        :model="formState"
        ref="columnFrom"
      >
        <a-form-item
          label="保存到"
          name="password"
          :rules="[{ required: true, trigger: 'change', message: '请选择栏目!' }]"
        >
          <div class="openorclose" @click="openorclose" v-show="!isOpen">
            <span>全部收起</span>
            <i class="iconfont icon-up" style="font-size: 24px"> </i>
          </div>
          <div class="openorclose" @click="openorclose" v-show="isOpen">
            <span>全部展开</span>
            <i class="iconfont icon-down" style="font-size: 24px"> </i>
          </div>
          <a-tree
            :expanded-keys="expandedKeys"
            :treeData="treeData"
            :fieldNames="fieldNames"
            :checkedKeys="checkedKeys"
            :checkStrictly="true"
            :selectable="true"
            :checkable="false"
            @checked_Keys="checked_Keys"
          ></a-tree>
        </a-form-item>
      </a-form>
    </template>
  </base-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import baseTree from "@/components/tree/baseTree.vue";
import baseModal from "@/components/modal/baseModal.vue";
import type { TreeProps } from "ant-design-vue";
import { scrollType, dataSourceType, configDataType } from "@/type";
import getters from "@/store/getters";
import request from "@/api/index";
const props = defineProps({
  isVisible: {
    type: Boolean,
    default: false,
  },
});
let buttons = ref<dataSourceType[]>([
  {
    text: "确定",
    "html-type": "submit",
    keepAlive: true,
  },
]);
//模态框数据
const modAlProps = reactive<dataSourceType>({
  width: "M",
  title: "保存",
});
//interface
interface Options {
  [propName: string | number]: any;
}
//树结构数据
const fieldNames = reactive<dataSourceType>({
  title: "channelName",
  key: "id",
});
const formState = ref<dataSourceType>({
  password: "",
});
const treeData = ref<Options[]>([]);
const checkedKeys = ref<(string | number | any)[]>([]);
const expandedKeys = ref<(string | number)[]>([]);
const dataList: TreeProps["treeData"] = [];
const parentKey = ref<(string | number)[]>([]);
const userInfo = getters.userInfo();
const isOpen = ref<boolean>(true); //是否展开或收起.
const columnFrom = ref<any>("columnFrom");

const checked_Keys = (obj: dataSourceType) => {
  console.log(obj, "obj");
};
// 全部展开 全部收齐
const openorclose = () => {
  isOpen.value = !isOpen.value;
  if (isOpen.value) {
    expandedKeys.value = [];
  } else {
    traversal(treeData.value);
  }
};
const traversal = (data: any) => {
  data.map((item: any) => {
    parentKey.value.push(item.id);
    if (item.children) {
      traversal(item.children);
    }
  });
  expandedKeys.value = parentKey.value;
};
const buttonMessage = async (msg: dataSourceType) => {
  columnFrom.value
    .validate()
    .then(() => {})
    .catch(() => {});
};
const emits = defineEmits(["handleCancle"]);
const handleCancle = (e: MouseEvent) => {
  emits("handleCancle", e);
};
//获取新增层级树列表
const fetchChannelListBySiteId = async () => {
  let params = {
    allPermFilter: true,
    siteId: userInfo.siteId,
  };
  treeData.value = await request.fetchChannelListBySiteId(params);
  // dataList.push(...treeData.value);
};
//onmounted
onMounted(async () => {
  fetchChannelListBySiteId();
});
</script>

<style lang="scss" scoped>
.sharing_modal {
  display: flex;
  span {
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
    line-height: 28px;
  }
  span:first-child {
    width: 70px;
    text-align: right;
  }
  .openorclose {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
    line-height: 32px;
    .iconfont {
      margin-left: 5px;
      color: rgba(0, 0, 0, 0.85);
    }
  }
}
:deep(.ant-form-item:last-child) {
  margin-bottom: 0;
}
</style>
